<template>
  <div class="app-container">
    <!-- 搜索筛选操作栏 -->
    <div class="filter-container clearfix">
      <el-select
        v-model="listQuery.type"
        placeholder="拍品类型"
        clearable
        style="width: 120px; margin-left: 10px"
        class="filter-item"
      >
        <el-option label="所有" :value="''" />
        <el-option label="提货" :value="1" />
        <el-option label="续拍订单" :value="2" />
        <el-option label="上拍" :value="3" />
      </el-select>
      <el-input
        v-model="listQuery.id"
        placeholder="商品id"
        clearable
        class="filter-item"
        style="width: 200px; margin-left: 10px"
      ></el-input>
      <el-input
        v-model="listQuery.name"
        placeholder="商品名称"
        clearable
        class="filter-item"
        style="width: 200px; margin-left: 10px"
      ></el-input>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        style="margin-left: 10px;"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <el-button
        v-waves
        class="filter-item"
        icon="iconfont qt-caozuo-xunhuan1"
        @click="clearFilter"
      >
        重置
      </el-button>
    </div>

    <!-- 表格 -->
    <el-table
      :key="tableKey"
      ref="table"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="时间" prop="created_at"></el-table-column>
      <el-table-column label="拍品编号" prop="id">
        <template slot-scope="{ row }">
          {{ row.product && row.product.id }}
        </template>
      </el-table-column>
      <el-table-column label="拍品名称">
        <template slot-scope="{ row }">
          <el-image
            style="width: 40px; height: 40px; text-align: center"
            :src="row.product && row.product.image"
            :preview-src-list="[row.product && row.product.image]"
          />
          <span style="vertical-align: top; margin-left: 10px">{{
            row.product && row.product.name
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="name">
        <template slot-scope="{ row }">
          {{ row.type | typeFilter }}
        </template>
      </el-table-column>
      <el-table-column label="用户" prop="name">
        <template slot-scope="{ row }">
          {{ row.user && row.user.name }}({{ row.user && row.user.user }} )
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div v-if="total > 0" style="text-align: right">
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.per_page"
        @pagination="getList"
      />
    </div>
  </div>
</template>
<script>
import { getActionLog } from "@/api/common";
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

export default {
  name: "auctioningPreview",
  components: {
    Pagination
  },
  directives: {
    waves
  },
  filters: {
    //   1、提货 2、续拍订单 3上拍
    typeFilter(val) {
      let result = "";
      switch (val) {
        case 1:
          result = "提货";
          break;
        case 2:
          result = "续拍订单";
          break;
        case 3:
          result = "上拍";
          break;
      }
      return result;
    }
  },
  data() {
    return {
      total: 0,
      tableKey: 0,
      list: null,
      listLoading: false,
      dateInput: undefined,
      listQuery: {
        id: "",
        type: "",
        name: "",
        page: 1,
        per_page: 20
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleFilter() {
      this.getList();
    },
    clearFilter() {
      this.listQuery["id"] = undefined;
      this.listQuery["type"] = undefined;
      this.listQuery["name"] = undefined;
      this.handleFilter();
    },
    getList() {
      this.listLoading = true;
      getActionLog(this.listQuery)
        .then(response => {
          //   console.log(res);
          const { data, total } = response.data;
          this.list = data;
          this.total = total;
        })
        .finally(() => {
          this.listLoading = false;
        });
    }
  }
};
</script>
